<template>
  <div class="nav-tab-component-container">
    <el-tabs :value="activeName" :before-leave="beforeLeave" @input="changeTab" type="card"  @tab-remove="deleteCaseTab" @tab-click="selectCaseItem">
      <slot>
        <el-tab-pane key="case-base-info" label="案件基本信息" name="case-base-info"></el-tab-pane>
      </slot>
      <el-tab-pane v-for="item in caseList" :key="item.component" :label="item.text" :name="item.component" :closable="item.canDel"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {

    }
  },
  model: {
    prop: 'activeName',
    event: 'input'
  },
  props: {
    caseList: {
      type: Array,
      default() {
        return []
      }
    },
    activeName: {
      type: String,
      default: 'case-base-info'
    },
    clickHook: {
      type: Function,
      default() {
        return true
      }
    }
  },
  methods: {
    beforeLeave(currentName, oldActiveName) {
      if (this.clickHook) {
        return this.clickHook(currentName, oldActiveName)
      }
      return true
    },
    changeTab(v) {
      this.$emit('input', v)
    },
    deleteCaseTab(val) {
      this.$emit('tab-remove', val)
    },
    selectCaseItem(val) {
      this.$emit('tab-click', val)
    }
  }

}
</script>

<style  lang="scss">
.nav-tab-component-container {
  width: 97%;
  height: 80px;
  .el-tabs {
    margin-top: 20px;
    & > .el-tabs__header {
      border: none;
      .el-tabs__nav {
        border: none;
      }
      .el-tabs__item {
        background-color: white;
        border-radius: 24px !important;
        margin-left: 10px;
        border: none;
      }
    }
    .el-tabs__item {
      &.is-active {
        border-radius: 24px;
        background: rgba(75, 121, 254, 1);
        color: white;
      }
    }
  }
}
</style>
